window.addEventListener('load', function () {
    // 1.获取元素
    var focus = document.querySelector('.focus');
    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('ol');
    // 2.轮播图自动播放
    var focusWidth = focus.offsetWidth;
    var index = 0;
    var timer = setInterval(function () {
        index++;
        var moveX = -index * focusWidth;
        ul.style.transition = 'all .3s'
        ul.style.transform = 'translateX(' + moveX + 'px)'
    }, 3000);
    // 3.无缝滚动：过渡完成之后再判断是否快速切换
    ul.addEventListener('transitionend', function () {  // 检测过渡完成事件 transitioned
        if (index >= ul.children.length - 2) {
            index = 0;
            ul.style.transition = 'none';
            // var moveX = -index * focusWidth;
            // ul.style.transform = 'translate(' + moveX + 'px)';
            ul.style.transform = 'translate(0)';
        } else if (index < 0) {
            index = ul.children.length - 3;
            ul.style.transition = 'none';
            var moveX = -index * focusWidth;
            ul.style.transform = 'translate(' + moveX + 'px)';
        }
        // 4.小圆点跟随变化
        ol.querySelector('.current').classList.remove('current');
        ol.children[index].classList.add('current');
    });
    // 5.手指滑动轮播图
    var startX = 0;
    var pointX = 0;
    var flag = false;
    ul.addEventListener('touchstart', function (e) {
        clearInterval(timer);
        startX = e.targetTouches[0].pageX;
    });
    ul.addEventListener('touchmove', function (e) {
        pointX = e.targetTouches[0].pageX - startX;
        ul.style.transition = 'none';
        var moveX = -index * focusWidth + pointX;
        ul.style.transform = 'translate(' + moveX + 'px)';
        flag = true;  // 判断手指是否移动
        e.preventDefault();
    })
    // 6.手指离开，根据移动距离判断图片播放
    ul.addEventListener('touchend', function (e) {
        if (flag) {
            if (Math.abs(pointX) > 100) {
                if (pointX > 0) {
                    index--;
                } else {
                    index++;
                }
                ul.style.transition = 'all .3s';
                var moveX = -index * focusWidth;
                ul.style.transform = 'translate(' + moveX + 'px)';
            } else {
                ul.style.transition = 'all .1s';
                var moveX = -index * focusWidth;
                ul.style.transform = 'translate(' + moveX + 'px)';
            }
        }
        // 手指离开后重启定时器
        clearInterval(timer);
        timer = setInterval(function () {
            index++;
            var moveX = -index * focusWidth;
            ul.style.transition = 'all .3s'
            ul.style.transform = 'translateX(' + moveX + 'px)'
        }, 3000);
    })

    // 7.返回顶部
    var goBack = document.querySelector('.goBack');
    var oneYuan = document.querySelector('.oneyuan')
    window.addEventListener('scroll', function () {
        if (window.pageYOffset > oneYuan.offsetTop) {
            goBack.style.display = 'block';
        } else {
            goBack.style.display = 'none';
        }
    });
    goBack.addEventListener('click', function () {
        window.scroll(0, 0);
    })

    // To instantiate FastClick on the body, which is the recommended method of use:
    if ('addEventListener' in document) {
        document.addEventListener('DOMContentLoaded', function () {
            FastClick.attach(document.body);
        }, false);
    }
})